<template>
	<view class="wrap">
		<view class="chat-box">
			<view class="chat-item flexWrapNo" v-for="(item,index) in chatList" :key="index" :class="{mine:item.isSelf}">
				<view class="chat-head">
					<image src="../../static/face.jpg"></image>
				</view>
				<view class="chat-text">
					{{item.content}}
				</view>
			</view>
		</view>
		<view class="send-input flexWrapNo">
			<u--textarea placeholder="善语结良缘,请文明聊天" v-model="content" autoHeight  class="input" @input="input"></u--textarea>
			<view class="send-btn" v-if="isShow" @tap="send()">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatList:[
					{
						atvar:"",
						content:
						`
							日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日
						`,
						isSelf:0
					},
					{
						atvar:"",
						content:
						`
							日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日
						`,
						isSelf:0
					},
					{
						atvar:"",
						content:
						`
							日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日
						`,
						isSelf:1
					}
				],
				content:"",
				isShow:false
			}
		},
		methods: {
			input(e){
				console.log(e)
				if(e){
					this.isShow=true
				}else{
					this.isShow=false
				}
			},
			send(){
				let chatItem={
					atvar:"",
					content:this.content,
					isSelf:1
				}
				this.chatList.push(chatItem)
				this.content=""
			}
		}
	}
</script>

<style lang="less">
	.wrap{
		
	}
	page{
		background: #f4f4f4;
	}
	.chat-box{
		padding: 30upx;
		.chat-item{
			align-items: flex-start;
			margin-bottom: 40upx;
			.chat-head{
				width: 100upx;
				height: 100upx;
				border-radius: 20upx;
				overflow: hidden;
				flex: none;
				margin-right: 20upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.chat-text{
				background: #fff;
				border-radius: 10upx;
				padding: 20upx;
				font-size:28upx;
			}
		}
		.mine{
			flex-direction: row-reverse;
			.chat-head{
				margin-left: 20upx;
				margin-right: 0;
			}
		}
	}
	.send-input{
		padding:10upx 20upx;
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		.input{
			background-color: #f4f4f4;
			padding:15upx 10upx !important;
			font-size:24upx;
			border: none;
			border-radius: 20upx;
		}
		.send-btn{
			border-radius: 10upx;
			width: 100upx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			color: #fff;
			font-size:28upx;
			background: #e16b8c;
			flex: none;
			margin-left: 20upx;
		}
	}
</style>
